<template>
  <div>
    <el-form-item :label="$t('panel.conditionType')">
      <el-select v-model="conditionData.conditionType" @change="setElementConditionType">
        <el-option v-for="opt in conditionTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
      </el-select>
    </el-form-item>
    <el-form-item v-if="conditionData.conditionType && conditionData.conditionType === 'expression'" :label="$t('panel.conditionExpression')">
      <el-input v-model="conditionData.expression" @change="setConditionExpression" />
    </el-form-item>
  </div>
</template>
  
  <script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue';
import modeler from '@wf/components/bpmnjs/store/modeler';
import { Element } from 'diagram-js/lib/model/Types';
import { scriptTypeOptions } from '@wf/components/bpmnjs/config/selectOptions';
import * as CU from '@wf/components/bpmnjs/bo-utils/conditionUtil';
import EventEmitter from '@wf/components/bpmnjs/utils/EventEmitter';

export default defineComponent({
  name: 'ElementCondition',
  setup() {
    const modelerStore = modeler();
    const getActive = computed<Element | null>(() => modelerStore.getActive!);

    // 变量配置部分
    const varVisible = ref<boolean>(false);
    const variableName = ref<string | undefined>(undefined);
    const varEventVisible = ref<boolean>(false);
    const variableEvents = ref<string | undefined>(undefined);
    const getElementVariables = () => {
      varVisible.value = CU.isConditionEventDefinition(getActive.value!);
      variableName.value = CU.getVariableNameValue(getActive.value!);
      if (varVisible.value) {
        varEventVisible.value = !CU.isExtendStartEvent(getActive.value!);
        variableEvents.value = CU.getVariableEventsValue(getActive.value!);
      }
    };
    const setElementVariableName = (value: string | undefined) => {
      CU.setVariableNameValue(getActive.value!, value);
    };
    const setElementVariableEvents = (value: string | undefined) => {
      CU.setVariableEventsValue(getActive.value!, value);
    };

    // 条件类型配置部分
    const conditionTypeOptions = ref<Record<string, string>[]>([]);
    const conditionData = ref<ConditionalForm>({});
    const getElementConditionType = () => {
      conditionData.value.conditionType = CU.getConditionTypeValue(getActive.value!);
      conditionData.value.conditionType === 'expression' && getConditionExpression();
      conditionData.value.conditionType === 'script' && getConditionScript();
    };
    const setElementConditionType = (value: string) => {
      CU.setConditionTypeValue(getActive.value!, value);
    };

    const getConditionExpression = () => {
      conditionData.value.expression = CU.getConditionExpressionValue(getActive.value!);
    };
    const setConditionExpression = (value: string | undefined) => {
      CU.setConditionExpressionValue(getActive.value!, value);
    };

    const getConditionScript = () => {
      conditionData.value.language = CU.getConditionScriptLanguageValue(getActive.value!);
      conditionData.value.scriptType = CU.getConditionScriptTypeValue(getActive.value!);
      conditionData.value.body = CU.getConditionScriptBodyValue(getActive.value!);
      conditionData.value.resource = CU.getConditionScriptResourceValue(getActive.value!);
    };
    const setConditionScriptLanguage = (value: string | undefined) => {
      CU.setConditionScriptLanguageValue(getActive.value!, value);
    };
    const setElementConditionScriptType = (value: string | undefined) => {
      CU.setConditionScriptTypeValue(getActive.value!, value);
    };
    const setConditionScriptBody = (value: string | undefined) => {
      CU.setConditionScriptBodyValue(getActive.value!, value);
    };
    const setConditionScriptResource = (value: string | undefined) => {
      CU.setConditionScriptResourceValue(getActive.value!, value);
    };

    onMounted(() => {
      getElementVariables();
      getElementConditionType();
      conditionTypeOptions.value = CU.getConditionTypeOptions(getActive.value!);
      EventEmitter.on('element-update', () => {
        conditionTypeOptions.value = CU.getConditionTypeOptions(getActive.value!);
        getElementVariables();
        getElementConditionType();
      });
    });

    return {
      varVisible,
      varEventVisible,
      variableName,
      variableEvents,
      setElementVariableName,
      setElementVariableEvents,
      conditionTypeOptions,
      conditionData,
      scriptTypeOptions,
      setElementConditionType,
      setConditionExpression,
      setConditionScriptLanguage,
      setElementConditionScriptType,
      setConditionScriptBody,
      setConditionScriptResource
    };
  }
});
</script>
  